<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>疫苗信息录入</title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        body{
            margin-top: 0;
            padding: 30px;
        }
    </style>
</head>
<body>
    <ol class="breadcrumb">
        <li><a href="/mainbg">主页</a></li>
        <li><a href="#">疫苗管理</a></li>
    </ol>
    <div id="vaccInfo" class="container-fluid">
        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">
            添加新疫苗
        </button>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">录入新疫苗</h4>
                    </div>
                    <form id="myVacc">
                        <div class="modal-body">
                                <div class="form-group form-inline">
                                    <label for="vaccinesname">疫苗名称</label>
                                    <input type="text" name="vaccinesname" class="form-control" id="vaccinesname" placeholder="请输入疫苗名称">
                                </div>
                                <div class="form-group form-inline">
                                    <label for="manufactor">疫苗厂商</label>
                                    <input type="text" name="manufactor" class="form-control" id="manufactor" placeholder="请输入疫苗厂商">
                                </div>
                                <div class="form-group form-inline">
                                    <label for="vacctype">疫苗类型</label>
                                    <input type="text" name="vacctype" class="form-control" id="vacctype" placeholder="请输入疫苗名称">
                                </div>
                                <div class="form-group form-inline">
                                    <label for="describes">疫苗描述</label>
                                    <input type="text" name="describes" class="form-control" id="describes" placeholder="请输入疫苗名称">
                                </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-warning" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-success" data-dismiss="modal" onclick="addVacc();">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <table class="table table-bordered table-striped table-hover" style="margin-top: 10px">
            <input type="hidden" name="pageNo" id="pageNo" th:value="${pageInfo.pageNum}" >
            <input type="hidden" name="pageSize" id="pageSize" th:value="${pageInfo.pageSize}">
            <input type="hidden" id="pageTotal" th:value="${pageInfo.total}">
            <thead>
                <tr class="info">
                    <th>疫苗编号</th>
                    <th>疫苗名称</th>
                    <th>疫苗厂商</th>
                    <th>疫苗类型</th>
                    <th>疫苗描述</th>
                    <th style="">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="vaccine:${vaccinesList}">
                    <td th:text="${vaccine.vaccinesid}"></td>
                    <td th:text="${vaccine.vaccinesname}"></td>
                    <td th:text="${vaccine.manufactor}"></td>
                    <td th:text="${vaccine.vacctype}"></td>
                    <td th:text="${vaccine.describes}"></td>
                    <td>
                        <button type="button" class="btn btn-warning btn-sm" data-toggle="modal" th:onclick="updateVacc('[[${vaccine}]]')" data-target="#myUpdate">
                            <span class="glyphicon glyphicon-cog">修改</span></button>
                        <button type="button" class="btn btn-danger btn-sm" th:onclick="'deleteVacc('+${vaccine.vaccinesid}+')'">
                            <span class="glyphicon glyphicon-trash">删除</span></button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="pageDemo"></div>
        <div class="modal fade" id="myUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel2">修改疫苗信息</h4>
                    </div>
                    <form id="myUpdataVacc">
                        <div class="modal-body">
                            <div class="form-group form-inline">
                                <label for="vaccinesid">疫苗编号</label>
                                <input style="width: 360px" type="text" name="vaccinesid" id="vaccinesid" readonly title="疫苗编号不可修改" class="form-control"  placeholder="请输入疫苗名称">
                            </div>
                            <div class="form-group form-inline">
                                <label for="vaccinesnameu">疫苗名称</label>
                                <input style="width: 360px" type="text" name="vaccinesname" id="vaccinesnameu"  class="form-control"  placeholder="请输入疫苗名称">
                            </div>
                            <div class="form-group form-inline">
                                <label for="manufactoru">疫苗厂商</label>
                                <input style="width: 360px" type="text" name="manufactor" id="manufactoru"  class="form-control"  placeholder="请输入疫苗厂商">
                            </div>
                            <div class="form-group form-inline">
                                <label for="vacctypeu">疫苗类型</label>
                                <input style="width: 360px" type="text" name="vacctype" id="vacctypeu"  class="form-control"  placeholder="请输入疫苗名称">
                            </div>
                            <div class="form-group form-inline">
                                <label for="describesu">疫苗描述</label>
                                <input style="width: 360px" type="text" name="describes" id="describesu"  class="form-control" placeholder="请输入疫苗名称">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-warning" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-success" data-dismiss="modal" onclick="updateVacc2()">保存修改</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function timeOutReflush() {
            setTimeout(function () {
                window.location.href='findAllVaccines?pageNo='+$('#pageNo').val()+'&pageSize='+$('#pageSize').val();
            },1500);
        }
        function addVacc() {
            $.ajax({
                url: '/addVacc',
                type: 'post',
                data: $("#myVacc").serialize(),
                success: function (result) {
                    if(result=='SUCCESS'){   //登录成功
                        layer.msg("疫苗信息添加成功",{icon:1});
                        timeOutReflush();
                    }else{   //登录失败
                        layer.alert('疫苗信息添加失败!',{icon:2});
                    }
                }
            });
            return false;
        }
        function updateVacc(vaccine) {   //弹出修改框并插入数据
            console.log(typeof vaccine);
            vaccine=eval("("+vaccine+")");   //将json转化成对象
            console.log(typeof vaccine);
            $("#vaccinesid").val(vaccine.vaccinesid);
            $("#vaccinesnameu").val(vaccine.vaccinesname);
            $("#manufactoru").val(vaccine.manufactor);
            $("#vacctypeu").val(vaccine.vacctype);
            $("#describesu").val(vaccine.describes);
        }
        function updateVacc2() {
            $.ajax({
                url: '/updateVacc',
                type: 'post',
                data: $("#myUpdataVacc").serialize(),
                success: function (result) {
                    console.log(result);
                    if(result>0){   //修改成功
                        layer.msg("疫苗信息修改成功",{icon:1});
                        timeOutReflush();
                    }else{   //登录失败
                        layer.alert('疫苗信息修改失败!',{icon:2});
                    }
                }
            });
            return false;
        }
        function deleteVacc(VaccId) {
            layer.confirm('删除后数据将不可恢复，确认删除?', {
                btn: ['确认',  '取消'] //可以无限个按钮
                ,btn3: function(index, layero){
                    layer.close(index);
                }
            }, function(index, layero){
                //按钮【按钮一】的回调
                $.ajax({
                    url: '/deleteVaccById',
                    type: 'post',
                    data: {'vaccinesid':VaccId},
                    success: function (result) {
                        if(result=='SUSSES'){   //登录成功
                            layer.alert("删除成功",{icon:1});
                            timeOutReflush();
                        }else{   //登录失败
                            layer.alert('删除失败!',{icon:2});
                        }
                    }
                });
                layer.close(index);
            });
            return false;
        }
    </script>
    <script type="text/javascript">
        layui.use(['laypage', 'layer'], function(){
            var laypage = layui.laypage
                ,layer = layui.layer;

            let pageNo=parseInt($('#pageNo').val());
            let pageSize=parseInt($('#pageSize').val());
            let pageTotal=parseInt($('#pageTotal').val());

            //完整功能
            laypage.render({
                elem: 'pageDemo'
                ,count: pageTotal
                ,curr: pageNo
                ,limit: pageSize
                ,limits: [5,10,20,30,50]
                ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                ,jump: function(obj,first){
                    console.log(obj);
                    if(!first){
                        //do something
                        /*$('#pageNo').val(obj.curr);
                        $('#pageSize').val(obj.limit);
                        $('#searchForm').submit();*/
                        console.log("pageNo="+obj.curr+",pageSize="+obj.limit);
                        location.href="findAllVaccines?pageNo="+obj.curr+"&pageSize="+obj.limit;
                    }
                }
            });

        });
    </script>

</body>
</html>